<template>
  <div ref="pieRef" style="width: 100%; height: 35vh"></div>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import useEchart from '@/hooks/useEchart'
import type { EChartsOption } from 'echarts'
const colorList = [
  '#0278E6',
  '#6255FE',
  '#00C6FF',
  '#F0960E',
  '#34D160',
  '#87cefa',
  '#da70d6',
  '#32cd32',
  '#6495ed',
  '#9fe6b8',
  '#e7bcf3',
  '#0E7CE2',
  '#FF8352',
  '#E271DE',
  '#4AEAB0'
]
const data = ref([
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
])
const option: EChartsOption = {
  color: colorList,
  title: {
    text: '销售量',
    left: 'left',
    textStyle: {
      color: 'rgb(179, 239, 255)',
      fontSize: 12
    }
  },
  tooltip: {
    trigger: 'item',
    textStyle: {
      fontSize: 12
    }
  },
  legend: {
    orient: 'vertical',
    // top: 'center',
    type: 'scroll',
    right: '5%',
    bottom: '10%',
    itemWidth: 15,
    itemHeight: 13,
    data: data.value.map((item: any, index) => {
      return {
        name: item.name,
        textStyle: {
          color: colorList[index]
        }
      }
    })
  },
  toolbox: {
    feature: {
      dataView: {
        show: false
      },
      magicType: {
        show: false
      },
      restore: {
        show: false
      }
    },

    top: 0,
    right: 5
  },
  series: [
    {
      name: '销售量',
      type: 'pie',
      radius: ['45%', '75%'],
      center: ['40%', '50%'],
      data: data.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle: {
        color: (params) => {
          var index = params.dataIndex
          return colorList[index]
        }
      }
    }
  ]
}
const pieRef = ref<HTMLElement>()
const { myChart } = useEchart(pieRef, option)
setInterval(() => {
  data.value.sort(function () {
    return Math.random() - 0.5
  })
  unref(myChart)?.setOption(option)
}, 2000)
</script>
